<template>
  <div class="course-case">
    <PageSearch :formConfig="courseFormConfig" />
    <PageContent
      ref="pageContentRef"
      v-bind="courseTableProps"
      @pageInfoChange="onPageInfoChange"
    />
  </div>
</template>

<script setup>
import { ref, provide, nextTick, watch } from 'vue'
import { useStore } from 'vuex'
import PageSearch from './components/PageSearch.vue'
import PageContent from './components/PageContent.vue'
import { courseFormConfig, courseTableProps } from './config/courseCase.config'

const store = useStore()
// 搜索表单的数据
const formValue = ref({
  // 下拉框值默认为“姓名”
  label: 'course_name',
  value: ''
})
// 分页参数
const page = ref({
  page_num: 1,
  page_size: 10
})
const pageContentRef = ref(null)

// 当改变了表单信息，点击查询时触发的事件
const changeFormValue = (data) => {
  formValue.value = data
  // console.log(formValue.value)
  pageContentRef.value.getPageList(formValue.value, page.value)
}
provide('formValue', formValue.value)
provide('changeFormValue', changeFormValue)

// 页面刷新就触发，当分页的信息发生变化时，触发的事件
const onPageInfoChange = (pageInfo) => {
  // 保存最新的分页参数
  page.value.page_num = pageInfo.page_num
  page.value.page_size = pageInfo.page_size
  nextTick(() => {
    pageContentRef.value.getPageList(formValue.value, pageInfo)
  })
}
</script>

<style lang="less" scoped>
.course-case {
  padding: 15px;
}
</style>
